<template>
    <section>
        <el-card shadow="hover" >
            <div class="card" >
                <el-avatar shape="circle" :src="remoteJudge.logo" ></el-avatar>
                <h2><a :href="remoteJudge.url" target="_blank">{{remoteJudge.name}}</a></h2>
                <p v-if="remoteJudge.status"><i class="el-icon-right" style="color: green"></i></p>
                <p v-else><i class="el-icon-error" style="color: red"></i></p>
            </div>
        </el-card>
    </section>

</template>

<script>
export default {
    data() {
        return {

        };
    },
    props:{
        remoteJudge:{
            type: Object,
            required: true
        }
    },
    methods: {

    }
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    min-height: 100svh;
    background: #1f2c3a;
    font-family: "Nunito", sans-serif;
    position: relative;
    overflow-x: hidden;
}

img {
    border-radius: 50%;
    width: clamp(100px, 40vw, 120px);
    height: clamp(100px, 40vw, 120px);
    object-fit: cover;
    object-position: top;
}
section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 75em;
    margin-inline: auto;
    gap: 0.938rem;
    transform: translatey(-3em);
    position: relative;
    z-index: 10;

    .card {
        padding: 1.875em 1.25em;
        max-width: 18.75rem;
        width: 90%;
        height: 16.875rem;
        display: grid;
        place-content: center;
        place-items: center;
        text-align: center;
        position: relative;

        &::before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 1rem;
            z-index: -1;
            border: 0.125rem solid transparent;
            background: linear-gradient(45deg, #1e272e, #48627a) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box,
            linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
        }

        h2 {
            color: #fff;
            letter-spacing: 0.05rem;
            font-size: clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem);
            margin-top: 0.625em;
            margin-bottom: 0.188em;
        }

        p {
            color: #afafaf;
            font-size: clamp(0.8rem, 0.7625rem + 0.1875vw, 0.95rem);
        }

        &-top {
            flex-basis: 100%;
            display: flex;
            justify-content: center;
            gap: 0.938rem;
            flex-wrap: wrap;

            .card {
                img {
                    width: clamp(7.5rem, 40vw, 9.375rem);
                    height: clamp(7.5rem, 40vw, 9.375rem);
                }
            }
        }
    }
}
</style>
